<template>
  <div>
    <el-button icon="el-icon-circle-plus" class="addBtn" @click="open"
      >添加好友</el-button
    >
    <el-dialog
      title="添加好友"
      :visible.sync="dialogVisible"
      width="30%"
      center
    >
      <span>请输入账号添加好友:</span>
      <div class="email">
        <el-input v-model="emailVal" placeholder="邮箱或用户名"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="search"
          >搜索</el-button
        >
      </div>
      <div v-if="showSearch" class="search">
        <span>搜索结果:</span>
        <div v-for="item in searchData" :key="item.id" class="searchData">
          <el-avatar
            shape="square"
            :size="100"
            :src="photourl(item.photo)"
          ></el-avatar>
          <div class="addSpen">
            <span>用户名:{{ item.name }}</span>
            <el-button class="a" @click="addFriends(item.id)"
              >添加好友</el-button
            >
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  name: "AddFriends",
  props: {},
  data() {
    return {
      dialogVisible: false,
      emailVal: null,
      showSearch: false,
      searchData: [
        {
          name: "admin",
          photo: `${process.env.VUE_APP_SERVER_HOST}/20210416205749u=1984627672,1500841212&fm=15&gp=0.jpg`,
        },
      ],
    };
  },
  computed: {
    ...mapState(["userId", "email"]),
  },
  created() {},
  methods: {
    photourl(photo) {
      return `${process.env.VUE_APP_SERVER_HOST}${photo}`;
    },
    open() {
      this.dialogVisible = true;
    },
    //搜索好友
    search() {
      if (!this.email) {
        console.log("you");
        this.$message({
          type: "error",
          message: "请输入邮箱或用户名",
        });
        return;
      }
      this.$https
        .get(`/user/search/${this.userId}/${this.emailVal}`)
        .then((d) => {
          if (d.code === 200) {
            this.showSearch = true;
            this.searchData = d.data;
          } else {
            this.$message({
              type: "error",
              message: "搜索失败",
            });
          }
        })
        .catch((e) => {
          this.$message({
            type: "error",
            message: "搜索失败",
          });
        });

    },
    addFriends(id) {
      this.$https
        .post("/friends", { userId: this.userId, friendsId: id })
        .then((d) => {
          if (d.code == 200) {
            this.$message({
              type: "success",
              message: "添加成功",
            });
            this.dialogVisible = false;
            this.searchData=[]
            this.$emit("success");
          } else {
            this.$message({
              type: "error",
              message: "添加失败",
            });
          }
        })
        .catch((e) => {
          this.$message({
            type: "error",
            message: "添加失败",
          });
        });
    },
  },
};
</script>
<style scoped lang="scss">
.addBtn {
  width: 100%;
}
.email {
  display: flex;
}
.search {
  margin-top: 20px;
}
.searchData {
  margin-top: 10px;
  background-color: rgb(230, 228, 228);
  text-align: center;
  height: 100px;
  display: flex;
  .addSpen {
    padding-top: 30px;
    padding-left: 20px;
    .a {
      margin-left: 90px;
    }
  }
}
</style>